﻿<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <input type="text" id="userid" placeholder="Enter user name" />
    <br>
    <input type="text" id="message" placeholder="Enter sned message" />
    <input type="button" id="btnSend" value="Send" />
    <ul id="msglist"></ul>

    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="signalr.min.js"></script>
    <script>
    $(function () {
        //服务地址
        let hubUrl = 'http://localhost:5013/MessageHub';
        debugger
        let httpConnection = new signalR.HttpConnection(hubUrl);
        let hubConnection = new signalR.HubConnection(httpConnection);

        $("#btnSend").click(function () {
            //新建对象
            let obj = new Object();
            obj.UserName = $('#userid').val();
            obj.Message = $('#message').val();
            //调用服务器方法TestSendMessageToAll
            hubConnection.invoke('OnMessage', obj);
        });

        //服务器回调方法Show
        hubConnection.on('OnMessage', data => {
            $('#msglist').append($('<li>').text(data));
        });

        hubConnection.start();
    });
    </script>
</body>
</html>